<template>
	<view :data-theme="theme()" :class="theme() || ''">
		<view class="form">
			<view class="formBox">
				<!-- <text class="red mr10">*</text> -->
				<view class="left textJustify">标题</view>
				<text>:</text>
				<view class="right rBorder">
					<input type="text" v-model="formData.tilte" placeholder="请输入" />
				</view>
			</view>
			<view class="formBox">
				<view class="left textJustify">商家类型</view>
				<text>:</text>
				<view class="right">
					<uni-data-select v-model="formData.type" :localdata="selectFange"
						@change="rangeChange"></uni-data-select>
				</view>
			</view>
			<view class="formBox mt60" v-if="!formData.type">
				<view class="left textJustify">上传图片</view>
				<text>:</text>
				<view class="right">
					<view class="UploadBOx">
						<view class="UploadBOx_item" v-for="(item,index) in formData.img" :key="index"
							@click="openUpload(index,'image')">
							<image v-if="item.filePath" :src="item.filePath" mode="aspectFit"></image>
							<view v-else><text class="icon iconfont icon-jia"></text></view>
							<view v-if="item.filePath" class="iconUpl" @click.stop="onWaydelete(index)">
								<text class="icon iconfont icon-guanbi"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="formBox">
				<view class="left textJustify">课程描述</view>
				<text>:</text>
				<view class="right rBorder">
					<input type="text" v-model="formData.tilte" placeholder="请输入" />
				</view>
			</view>
			<view class="formBox">
				<view class="left textJustify">选择课程</view>
				<text>:</text>
				<view class="right rBorder">
					<input type="text" v-model="formData.tilte" placeholder="请输入" />
				</view>
			</view>
		</view>
		<view class="publish ">
			<view class="d-s-c p-20-0">
				<view class="ww33 m-0-10">
					<button class="theme-bg white f30" @click="onWaysave">保存草稿</button>
				</view>
				<view class="ww33 m-0-10">
					<button class="theme-bg white f30" @click="onWayPreview">预览</button>
				</view>
				<view class="ww33 m-0-10">
					<button class="theme-bg white f30" @click="onWayAdd">立即发布</button>
				</view>
			</view>
		</view>
		<Upload v-if="isupload" :isupload="isupload" :num='UploadNum' :type="type" @getImgs="getImgsFunc">上传图片</Upload>
	</view>
</template>

<script>
	import Upload from '@/components/upload/upload';
	export default {
		components: {
			Upload
		},
		data() {
			return {
				formData: {
					tilte: '',
					type: 0,
					img: [{}],
					describe: ''
				},
				selectFange: [{
						value: 0,
						text: "图片"
					},
					{
						value: 1,
						text: "视频"
					},
				],
				isupload: false, //上传
				type: 'image',
				typeIndex: 0,
				UploadNum: 9,

			}
		},
		onLoad(option) {

		},
		onShow() {

		},
		methods: {
			//选择类型
			rangeChange(e) {
				console.log('选择类型', e);
			},
			/*上传*/
			openUpload(index, type) {
				this.typeIndex = index
				this.type = type;
				this.isupload = !this.isupload;
			},
			/*获取图片*/
			getImgsFunc(e) {
				console.log(e);
				this.isupload = false;
				if (e != null && e.length > 0) {
					if (this.typeIndex == 0) {
						this.formData.img = e
					} else {
						let arr = this.formData.img
						arr = arr.filter(obj => Object.keys(obj).length !== 0);
						this.formData.img = arr.concat(e)
					}

					if (this.formData.img.length < 9) {
						this.UploadNum - this.formData.img.length
						this.formData.img.push({})
					}
				}
			},
			//删除项
			onWaydelete(index) {
				console.log(index);
				this.formData.img.splice(index, 1);
			},
			//保存草稿
			onWaysave() {
				uni.showToast({
					title: '保存成功',
					icon: 'none'
				})
				uni.navigateBack({})
			},
			//发布
			onWayAdd() {
				let url = '/pagesLive/menu/article/details/succeed';
				this.gotoPage(url);
			},
			//预览
			onWayPreview() {
				let url = '/pagesLive/menu/article/details/preview';
				this.gotoPage(url);
			},

		}

	}
</script>

<style lang="scss" scoped>
	.form {
		background-color: #fff;
		padding: 40rpx 30rpx 20rpx 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}

	.formBox {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.left {
			width: 150rpx;

		}

		.right {
			margin-left: 20rpx;
			flex: 1;

			.UploadBOx {
				display: flex;
				flex-wrap: wrap;

				.UploadBOx_item {
					width: 120rpx;
					height: 120rpx;
					border-radius: 10rpx;
					border: 1px solid #E1E1E1;
					position: relative;
					padding: 10rpx;
					margin: 5rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 120rpx;
						height: 120rpx;
						display: block;
					}

					.iconUpl {
						position: absolute;
						right: 0;
						top: 0;
						background-color: rgba(0, 0, 0, 0.5);
						border-radius: 50%;
						padding: 0 5rpx;
						z-index: 10rpx;
					}
				}
			}
		}

		.rBorder {
			border: 1px solid #e5e5e5;
			box-sizing: border-box;
			border-radius: 4px;
			padding-left: 10px;
			position: relative;
			display: flex;
			-webkit-user-select: none;
			user-select: none;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 35px;

			::v-deep .uni-input-input {
				font-size: 28rpx;
			}

			::v-deep .input-placeholder {
				font-size: 22rpx;
			}
		}
	}
</style>